<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="js/bootstrap-table/bootstrap-table.min.css">
    <script src="js/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript">
        $(function () {
            search();
        });

        function search(){
            getRefresh();
            $("#datagrid").bootstrapTable({

                url: "/teacher/list",
                method: "get",
                dataType: "json",

                clickToSelect: true,
                singleSelect: true,

                pagination: true,
                pageNumber: 1,
                pageSize: 3,
                pageList: [3, 6 ,20 , 50],
                sidePagination: "server",
                smartDisplay: false,

                columns: [
                    {checkbox: true},
                    {field: "id", title: "编号"},
                    {field: "name", title: "姓名"},
                    {field: "age", title: "年龄"},
                    {field: "gender", title: "性别",
                        formatter: function (val){
                            return val==1?"女":"男";
                        }},
                    {field: "img", title: "图片",
                        formatter: function (path){
                            return `<img src="${path}" width="60px" height="80px">`;
                        }},
                    {field: "address", title: "地址"},
                    {field: "phone", title: "手机"},
                    {field: "experience", title: "经历"}
                ],
                queryParams: function (params) {
                    var json = {
                        size: params.limit,
                        pageNum: (params.offset / params.limit) + 1,
                        keyWord: $("#condition").val()
                    };
                    return json;
                }
            })
        }

        //增删改后更新列表
        function getRefresh() {
            $("#datagrid").bootstrapTable('refresh');
        }

        function getSelectRow() {
            // 获取当前行
            var rows=$("#datagrid").bootstrapTable('getSelections');
            console.log(rows[0].empno);
        }

        function del() {
            var rows=$("#datagrid").bootstrapTable('getSelections');
            if (rows.length<1){
                alert("请勾选要删除的教师信息！");
            }else {
                if (confirm("是否删除")){
                    $.get("teacher/del",{id:rows[0].id},function(res){
                        if (res){
                            getRefresh();
                        }
                    })
                }
            }
        }

        function add() {
            $("#modify").val("0");
            $(".modal-title").html("教师信息添加");
            $("#id").val("");
            $("#name").val("");
            $("#age").val("");
            $("#male").prop('checked',false);
            $("#female").prop('checked',false);
            $("#img").val("");
            $("#address").val("");
            $("#phone").val("");
            $("#experience").val("");
        }

        function edit() {
            var rows=$("#datagrid").bootstrapTable('getSelections');
            if (rows.length == 0){
                alert("请勾选要修改的教师信息！");
            }else {
                $("#modify").val("1");
                $(".modal-title").html("教师信息修改");
                $.post("teacher/getById",{id:rows[0].id},function(map){
                    let teacher = map["teacher"];
                    $("#id").val(teacher.id);
                    $("#name").val(teacher.name);
                    $("#age").val(teacher.age);
                    if (teacher.gender == 0){
                        $("#male").prop('checked',true);
                    }else if (teacher.gender == 1){
                        $("#female").prop('checked',true);
                    }
                    $("#img").val(teacher.img);
                    $("#address").val(teacher.address);
                    $("#phone").val(teacher.phone);
                    $("#experience").val(teacher.experience);
                    $("#editModal").modal('show');
                })
            }
        }

        function save() {
            let formData = new FormData($("#editForm")[0]);
            $.ajax({
                url:"http://localhost:313/teacher/save",
                method:"post",
                data:formData,
                dataType:"json",
                async:false,
                cache:false,
                contentType:false,
                processData:false,
                success:function(res){
                    getRefresh();
                    $("#editModal").modal('hide');
                }
            })
        }

        function submit(){
            let formData = new FormData($("#testFile")[0]);
            $.ajax({
                url:"http://localhost:313/teacher/testFile",
                method:"post",
                data:formData,
                dataType:"json",
                async:false,
                cache:false,
                contentType:false,
                processData:false,
            })
        }

    </script>
</head>
<style>
    table {
        text-align: center;
    }

    #searchButton {
        position: absolute;
        margin-top: -1px;
    }
</style>
<body>
    <h1>教师信息</h1>
    <div class="row">
        <div class="col-lg-3">
            <div class="input-group">
                <input id="condition" type="text" class="form-control" placeholder="请输入教师名">
                <span class="input-group-btn">
                            <button class="glyphicon glyphicon-search btn btn-default" id="searchButton" onclick="search()">
                            </button>
                    </span>
            </div>
        </div>
    </div>
    <div style="display: flex">
        <button id="add" class="btn btn-success" data-toggle="modal" data-target="#editModal" onclick="add()">新增</button>&nbsp;&nbsp;
        <button id="edit" class="btn btn-primary" onclick="edit()">修改</button>&nbsp;&nbsp;
        <button id="remove" class="btn btn-danger" onclick="del()">删除</button>&nbsp;&nbsp;
    </div>

    <table id="datagrid" style="text-align: center"></table>
    <div class="modal fade" tabindex="-1" role="dialog" id="editModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title"></h2>
                </div>
                <div class="modal-body">
                    <form id="editForm">
                        <table class="table table-bordered table-striped">
                            <input id="id" class="form-control" type="hidden" name="id"/>
                            <input type="hidden" name="modify" id="modify">
                            <tr>
                                <td>姓名</td>
                                <td><input id="name" class="form-control" type="text" name="name" /></td>
                            </tr>
                            <tr>
                                <td>年龄</td>
                                <td><input id="age" class="form-control" type="number" name="age" /></td>
                            </tr>
                            <tr>
                                <td>性别</td>
                                <td><input id="male" type="radio" name="gender" value="0"/>男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="female" type="radio" name="gender" value="1"/>女</td>
                            </tr>
                            <tr>
                                <td>图片</td>
                                <td>
                                    <input id="file" name="file" type="file" class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td>地址</td>
                                <td><input id="address" class="form-control" type="text" name="address" /></td>
                            </tr>
                            <tr>
                                <td>电话</td>
                                <td><input id="phone" class="form-control" type="number" name="phone" /></td>
                            </tr>
                            <tr>
                                <td>经历</td>
                                <td><textarea id="experience" class="form-control" name="experience" rows="10" cols="15"></textarea></td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>
</html>